import { useDrag } from "react-dnd"

export interface MaterialItemProps{
    name: string,
    desc: string
}

//渲染每个组件（用组件名渲染）
export function MaterialItem(props: MaterialItemProps){
    const { name, desc } = props
    const [, dragRef] = useDrag({
        type: name,//当前drag的标识，drop的时候根据这个来决定是否accept
        item: {//传递的数据
            type:name
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    })
    return <div 
        ref={dragRef}
        className={`
            border-dashed
            border-[1px]
            border-[#000]
            py-[8px] px-[10px] 
            m-[10px]
            cursor-move
            inline-block
            bg-white
            hover:bg-[#ccc]
            `}>
        {desc}

    </div>
}